import { DatePicker, Form, Input, InputNumber, Modal, Select, Switch } from 'antd';
import { forwardRef, useEffect, useImperativeHandle, useState } from 'react';
import type { FormDialogProps } from './data';
const { Option } = Select;

const ChildForm: React.FC<FormDialogProps> = (props, uploadRef) => {
  const [visible, setVisible] = useState(false);
  const [disabled, setDisabled] = useState(false);
  const [confirmLoading, setConfirmLoading] = useState(false);
  const [initialValues, setInitialValues] = useState({});
  const [form] = Form.useForm();

  useEffect(() => {
    setVisible(props.visible);
    setDisabled(props.disabled);
    setInitialValues(props.initialValues || {});
  }, [props.visible, props.disabled, props.initialValues]);
  useImperativeHandle(uploadRef, () => {
    // return返回的值就可以被父组件获取到,没返回的值就获取不到
    return {
      // 获取其中的值
      getFieldsValue: () => {
        return form.getFieldsValue();
      },
      // 设置值
      setFieldsValue: (value: object) => {
        return form.setFieldsValue(value);
      },
      // 重置其中的值
      resetFields: () => {
        return form.resetFields();
      },
    };
  });
  const items = props.columns.map((item, index) => {
    if (item.type === 'inputNumber') {
      return (
        <Form.Item
          key={item.field}
          hidden={item.hidden}
          label={item.label}
          name={item.field}
          rules={[{ required: true, message: 'Please input your username!' }]}
        >
          <InputNumber disabled={disabled ? item.disabled : false} />
        </Form.Item>
      );
    } else if (item.type === 'switch') {
      return (
        <Form.Item
          key={item.field}
          hidden={item.hidden}
          label={item.label}
          name={item.field}
          rules={[{ required: true, message: 'Please input your username!' }]}
        >
          <Switch />
        </Form.Item>
      );
    } else if (item.type === 'date') {
      return (
        <Form.Item
          key={item.field}
          label={item.label}
          hidden={item.hidden}
          name={item.field}
          rules={[{ required: true, message: 'Please input your username!' }]}
        >
          <DatePicker />
        </Form.Item>
      );
    } else if (item.type === 'select') {
      return (
        <Form.Item
          key={item.field}
          label={item.label}
          hidden={item.hidden}
          name={item.field}
          rules={[{ required: true, message: 'Please input your username!' }]}
        >
          <Select placeholder={item?.placeholder} disabled={disabled ? item.disabled : false}>
            {item.options.map((item) => {
              return (
                <Option key={item.value} value={item.value}>
                  {item.label}
                </Option>
              );
            })}
          </Select>
        </Form.Item>
      );
    } else {
      return (
        <Form.Item
          key={item.field}
          label={item.label}
          hidden={item.hidden}
          name={item.field}
          rules={[{ required: true, message: 'Please input your username!' }]}
        >
          <Input disabled={disabled ? item.disabled : false} />
        </Form.Item>
      );
    }
  });

  return (
    <div>
      <Modal
        title={props.title}
        confirmLoading={confirmLoading}
        visible={visible}
        onOk={async () => {
          // 需要加loading
          setConfirmLoading(true);
          await props.onOk();
          setConfirmLoading(false);
        }}
        onCancel={() => {
          props.onCancel();
        }}
      >
        <Form
          name="wrap"
          labelCol={{ flex: '110px' }}
          initialValues={initialValues}
          labelAlign="left"
          labelWrap
          form={form}
          wrapperCol={{ flex: 1 }}
          colon={false}
        >
          {items}
        </Form>
      </Modal>
    </div>
  );
};
const ToeForm = forwardRef<unknown, FormDialogProps>(ChildForm);

export default ToeForm;
